const body = document.querySelector('body')
document.addEventListener('DOMContentLoaded', () => {
    const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
    if ($navbarBurgers.length > 0) {
        $navbarBurgers.forEach(el => {
            el.addEventListener('click', () => {
                const target = el.dataset.target;
                const $target = document.getElementById(target);
                el.classList.toggle('is-active');
                $target.classList.toggle('is-active');
            });
        });
    }

});

// 检查手机是否支持
if (window.DeviceOrientationEvent) {
    window.addEventListener('deviceorientation', (event) => {

        if (event.alpha == null) {
            setMouseListener()
            return;
        }
        calcOffset(event.beta, event.gamma);
    }, false);
} else {
    setMouseListener()
}

function setMouseListener() {
    body.addEventListener('mousemove', (e) => {
        let percentWidth = e.clientX / window.outerWidth - 0.5
        let percentHeight = e.clientY / window.outerHeight - 0.5
        body.style.setProperty('--percentWidth', percentWidth)
        body.style.setProperty('--percentHeight', percentHeight)
    })
}

function calcOffset(beta, gamma) {
    let offsetX = Math.sin((Math.abs(beta) < 90 ? gamma : -gamma) * Math.PI / 180);  // - 90 < beta < 90 时，手机朝上
    let offsetY = Math.sin(beta * Math.PI / 180);
    let percentWidth = offsetX
    let percentHeight = offsetY
    body.style.setProperty('--percentWidth', percentWidth)
    body.style.setProperty('--percentHeight', percentHeight)
}
